<template>
  <view>
    <u-card :border="false" box-shadow="0px 0px 8px #ddd6d6" :body-style="{ padding: '0 20rpx' }"
      :head-style="{ padding: '28rpx 30rpx 10rpx' }" :head-border-bottom="false">
      <view slot="head">
        <view class="card-row u-flex head">
          <u-section title="告警情况" color="#014833" font-size="32" :right="false"></u-section>
        </view>
      </view>
      <view slot="body">
        <view class="card-row  u-p-t-10 u-p-b-28">
          <view class="w-100p">
            <u-section title="人员信息告警" color="#333" font-size="30" :show-line="false"
              @click="goList({ src: '' })"></u-section>
            <view>
              <view class="body-cont" v-for="item in personList" :key="item.id">
                <view class="u-flex alarm">
                  <u-image mode="aspectFit" width="88rpx" height="88rpx"
                    :src="'/static/image/workbench/practitioner/' + item.src + '.svg'"></u-image>
                  <view class="alarm-body">
                    <view class="alarm-tit u-flex">
                      <h4 @click="goList(item)">{{ item.num }}</h4>
                      <text>条</text>
                    </view>
                    <view class="alarm-txt">{{ item.name }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view class="w-100p u-m-t-40">
            <u-section title="煤矿信息告警" color="#333" font-size="30" :show-line="false"
              @click="goMine({ src: '' })"></u-section>
            <view>
              <view class="body-cont" v-for="(item, index) in customerList" :key="index">
                <view class="u-flex alarm customer">
                  <u-image mode="aspectFit" width="88rpx" height="88rpx"
                    :src="'/static/image/workbench/practitioner/' + item.src + '.svg'"></u-image>
                  <view class="alarm-body">
                    <view class="alarm-tit u-flex">
                      <h4 @click="goMine(item)">{{ item.num }}</h4>
                      <text>条</text>
                    </view>
                    <view :class="'alarm-txt txt' + index">{{ item.name }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </u-card>
  </view>
</template>
<script>
export default {
  props: {
    customerId: {
      type: String,
      default: ''
    },
  },
  watch: {
    'customerId': {
      immediate: true,
      handler: function (newval) {
        if (newval) {
          this.getData(newval);
        }
      },
    },
  },
  data () {
    return {
      personList: [
        {
          src: 'no_certificate',
          num: '',
          name: '无证告警'
        },
        {
          src: 'certificate',
          num: '',
          name: '证书告警'
        },
        {
          src: 'contract',
          num: '',
          name: '合同到期告警'
        },
        {
          src: 'not_filing',
          num: '',
          name: '未建档'
        }
      ],
      customerList: [
        {
          src: 'education',
          num: '',
          name: '学历未达标'
        },
        {
          src: 'person',
          num: '',
          name: '五职矿长任职异常'
        },
      ]
    }
  },
  methods: {
    getData (val) {
      this.$post(`/cyry/alarm/person/personAlarmCount?customerId=${val}`).then(res => {
        if (res.body) {
          const {
            certificateAlarm,
            contractExpirationAlarm,
            unfoldedAlarm,
            unlicensedAlarm
          } = res.body
          this.personList[0].num = unlicensedAlarm
          this.personList[1].num = certificateAlarm
          this.personList[2].num = contractExpirationAlarm
          this.personList[3].num = unfoldedAlarm
        }
      })

      this.$post(`/cyry/alarm/customer/customerAlarmCount?customerId=${val}`).then(res => {
        if (res.body) {
          const {
            educationNotStandardAlarm,
            fivePosMineAlarm,
          } = res.body
          this.customerList[0].num = educationNotStandardAlarm
          this.customerList[1].num = fivePosMineAlarm
        }
      })
    },
    goMine (val) {
      let type = ''
      const ty = val.src
      if (ty == 'education') {
        type = '013'
      } else if (ty == 'person') {
        type = '015'
      }
      uni.navigateTo({
        url: `/pages/practitioner/mineAlarm/index?customerId=${this.customerId}&warningType=${type}`
      })
    },
    goList (val) {
      let type = ''
      const ty = val.src
      if (ty == 'no_certificate') {
        type = '019'
      } else if (ty == 'certificate') {
        type = '006'
      } else if (ty == 'contract') {
        type = '003'
      } else if (ty == 'not_filing') {
        type = '002'
      }
      uni.navigateTo({
        url: `/pages/practitioner/staff/index?customerId=${this.customerId}&warningType=${type}`
      })

    }
  }
}
</script>
<style lang="scss" scoped>
.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #F6F6F6;
}

.body {
  &-cont {
    box-shadow: 0 0 18rpx 0 rgba($color: #014833, $alpha: 0.2);
    border-radius: 12rpx;
    width: 48%;
    display: inline-block;
    margin-top: 24rpx;

    .alarm {
      justify-content: space-around;
      padding: 26rpx;
      font-size: 26rpx;

      &-tit {
        justify-content: center;

        h4 {
          font-size: 40rpx;
          margin-right: 10rpx;
          color: #333;
        }
      }

      &-txt {
        white-space: nowrap;

        &.txt1 {
          font-size: 20rpx;
        }
      }
    }

    &:nth-child(2n) {
      margin-left: 20rpx;
    }
  }
}
</style>